<template>
    <div>
        <mj-title type="h2" title="Descriptions 描述列表"></mj-title>
        <div class="page-desc">列表形式展示多个字段。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<mj-descriptions title="用户信息" border size="medium">
                    <mj-descriptions-item label="用户名">kooriookami</mj-descriptions-item>
                    <mj-descriptions-item label="手机号">18100000000</mj-descriptions-item>
                    <mj-descriptions-item label="居住地">苏州市</mj-descriptions-item>
                    <mj-descriptions-item label="备注">
                        <mj-tag color="primary">学校</mj-tag>
                    </mj-descriptions-item>
                    <mj-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</mj-descriptions-item>
                </mj-descriptions>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
						&lt;template>
						&lt;mj-descriptions title="用户信息" border size="medium">
							&lt;mj-descriptions-item label="用户名">kooriookami&lt;/mj-descriptions-item>
							&lt;mj-descriptions-item label="手机号">18100000000&lt;/mj-descriptions-item>
							&lt;mj-descriptions-item label="居住地">苏州市&lt;/mj-descriptions-item>
							&lt;mj-descriptions-item label="备注">
								&lt;mj-tag color="primary">学校&lt;/mj-tag>
							&lt;/mj-descriptions-item>
							&lt;mj-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号&lt;/mj-descriptions-item>
						&lt;/mj-descriptions>
					&lt;/template>
					export default {
						data () {
							return {}
						},
						methods: {}
					}
					&lt;/script>
					</code>
				</pre>
            </mj-tab-pane>
        </mj-tabs>
        <mj-title type="h5" title="Descriptions"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>border</td>
					<td>是否带有边框</td>
					<td>boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>column</td>
					<td>一行 Descriptions Item 的数量</td>
					<td>number</td>
					<td>3</td>
				</tr>
				<tr>
					<td>direction</td>
					<td>排列的方向 <code>vertical / horizontal</code></td>
					<td>string</td>
					<td>horizontal</td>
				</tr>
                <tr>
					<td>size</td>
					<td>列表的尺寸 <code>medium / small</code></td>
					<td>string</td>
					<td>-</td>
				</tr>
                <tr>
					<td>title</td>
					<td>标题文本，显示在左上方</td>
					<td>string</td>
					<td>-</td>
				</tr>
                <tr>
					<td>extra</td>
					<td>操作区文本，显示在右上方</td>
					<td>string</td>
					<td>-</td>
				</tr>
                <tr>
					<td>colon</td>
					<td>是否显示冒号</td>
					<td>boolean</td>
					<td>true</td>
				</tr>
                <tr>
					<td>labelClassName</td>
					<td>自定义标签类名</td>
					<td>string</td>
					<td>-</td>
				</tr>
                <tr>
					<td>contentClassName</td>
					<td>自定义内容类名</td>
					<td>string</td>
					<td>-</td>
				</tr>
                <tr>
					<td>labelStyle</td>
					<td>自定义标签样式</td>
					<td>object</td>
					<td>-</td>
				</tr>
                <tr>
					<td>contentStyle</td>
					<td>自定义内容样式</td>
					<td>object</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

        <mj-title type="h5" title="Descriptions Slots"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>Name</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>title</td>
					<td>自定义标题，显示在左上方</td>
				</tr>
				<tr>
					<td>extra</td>
					<td>自定义操作区，显示在右上方</td>
				</tr>
			</tbody>
		</table>

        <mj-title type="h5" title="Descriptions Item"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>label</td>
					<td>标签文本</td>
					<td>string</td>
					<td>-</td>
				</tr>
				<tr>
					<td>span</td>
					<td>列的数量</td>
					<td>number</td>
					<td>1</td>
				</tr>
				<tr>
					<td>labelClassName</td>
					<td>自定义标签类名</td>
					<td>string</td>
					<td>-</td>
				</tr>
                <tr>
					<td>contentClassName</td>
					<td>自定义内容类名</td>
					<td>string</td>
					<td>-</td>
				</tr>
                <tr>
					<td>labelStyle</td>
					<td>自定义标签样式</td>
					<td>object</td>
					<td>-</td>
				</tr>
                <tr>
					<td>contentStyle</td>
					<td>自定义内容样式</td>
					<td>object</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

        <mj-title type="h5" title="Descriptions Item Slots"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>label</td>
					<td>自定义标签文本</td>
				</tr>
			</tbody>
		</table>
    </div>
</template>

<script>
export default {
    name: 'descriptions',
    props: {},
    watch: {},
    computed: {},
    data() {
        return {}
    },
    created() { },
    mounted() { },
    methods: {},
}
</script>

<style scoped>

</style>
